<template>
  <div>
    <ProTable
      ref="proTableRef"
      :request="request"
      :default-sort="{
        prop: 'createTime',
        order: 'descending',
      }"
      @selection-change="onSelect"
    >
      <template #buttons>
        <el-button
          v-auth="'base:sys:user:add'"
          type="primary"
          @click="$refs.opRef.open()"
          >新增</el-button
        >
        <el-button
          v-auth="'base:sys:user:delete'"
          type="danger"
          :disabled="checkedIds.length === 0"
        >
          删除
        </el-button>
      </template>

      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="Id" width="70" sortable="custom" />
      <el-table-column prop="headImg" label="头像" width="70">
        <template #default="{ row }">
          <el-avatar :src="row.headImg" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名" width="80" />
      <el-table-column prop="name" label="姓名" width="80" />
      <el-table-column prop="nickName" label="昵称" width="80" />
      <el-table-column prop="roleName" label="角色" width="80" />
      <el-table-column prop="status" label="状态" width="80">
        <template #default="{ row }">
          <el-switch
            :modelValue="!!row.status"
            @update:modelValue="updateStatus($event, row.id)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号码" width="120" />
      <el-table-column prop="remark" label="备注" width="120" />
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        sortable="custom"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        width="180"
        sortable="custom"
      />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="$refs.opRef.open(row)">编辑</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </ProTable>

    <OpDialog ref="opRef" @success="$refs.proTableRef.refresh()" />
  </div>
</template>

<script>
import { getUserList, updateUser } from "@/api/system";
import ProTable from "@/components/pro-table/index.vue";
import OpDialog from "./components/op-dialog.vue";

export default {
  name: "User",

  components: {
    ProTable,
    OpDialog,
  },

  data() {
    return {
      checkedIds: [], // 勾选的数据Id集合
    };
  },

  methods: {
    // request 给到 ProTable 组件去执行的
    async request(params, sort) {
      console.log("=== params", params);
      console.log("=== sort", sort);
      const { list, pagination } = await getUserList({
        page: params.current,
        size: params.pageSize,
        order: sort.prop, // 排序字段
        sort: sort.order ? sort.order.replace("ending", "") : null, // 排序规则 asc || desc
      });
      return {
        success: true,
        list,
        total: pagination.total,
      };
    },

    /**
     * 更新状态
     */
    async updateStatus(flag, id) {
      console.log("updateStatus", flag, id);
      await updateUser({
        id,
        status: flag ? 1 : 0,
      });

      // this.request();
      this.$refs.proTableRef.refresh();
    },

    onSelect(a) {
      this.checkedIds = a.map((item) => item.id);
    },

    onRowClick() {
      console.log("onRowClick");
    },

    onRowDbClick() {
      console.log("onRowDbClick");
    },
  },
};
</script>
